import 'package:flutter/material.dart';

class MyApp17 extends StatefulWidget {
  const MyApp17({super.key});

  @override
  State<MyApp17> createState() => _MyApp17State();
}

const Map orderInfo = {
  'createTime': "2024-08-15 21:49:48",
  'orderState': "待发货",
  'image':
      "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
  'name': "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
  'totalNum': 2,
  'curPrice': 119.5,
  'attrsText': "规格: 白色240ml"
};

class _MyApp17State extends State<MyApp17> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('ListView综合案例'),
              backgroundColor: Colors.pink,
            ),
            body: Container(
              padding: const EdgeInsets.all(20),
              color: Colors.white,
              child: Column(children: [
                // 时间+待发货
                timebuilder(),
                const SizedBox(height: 10),
                // 商品详情
                Container(
                  // color: Colors.amber,
                  height: 120,
                  child: goodbuilder(),
                ),
                // 商品合计
                totalbuilder(),
                // 再次购买
                buyagainbuilder()
              ]),
            )));
  }
}

Widget timebuilder() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text(orderInfo['createTime']),
      Text(
        orderInfo['orderState'],
        style: const TextStyle(color: Colors.orange),
      ),
    ],
  );
}

Widget goodbuilder() {
  return Row(
    children: [
      // 图片
      Image.network(orderInfo['image'], width: 120),
      // 商品详情
      Expanded(
          flex: 1,
          child: Container(
            // color: Colors.blue,
            margin: const EdgeInsets.symmetric(horizontal: 15),
            padding: const EdgeInsets.only(left: 3, right: 22),
            child: Column(
              children: [
                Column(
                  // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 商品名
                    Text(orderInfo['name'],
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 16)),
                    const SizedBox(
                      height: 10,
                    ),
                    // 规格
                    Container(
                      padding: const EdgeInsets.symmetric(
                          vertical: 3, horizontal: 8),
                      decoration: BoxDecoration(
                          color: const Color.fromRGBO(247, 247, 247, 1),
                          borderRadius: BorderRadius.circular(10)),
                      child: Text(
                        orderInfo['attrsText'],
                        style: const TextStyle(color: Colors.grey),
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    // 单价
                    Text(
                      '¥${orderInfo['curPrice']}',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ],
                )
              ],
            ),
          )),
      // 商品数量
      Container(
        height: 150,
        padding: EdgeInsets.only(top: 15),
        child: Text('x ${orderInfo['totalNum']}'),
      )
    ],
  );
}

Widget totalbuilder() {
  return Container(
      margin: const EdgeInsets.symmetric(vertical: 10),
      alignment: Alignment.bottomRight,
      child: Text('合计：¥${orderInfo['totalNum'] * orderInfo['curPrice']}'));
}

buyagainbuilder() {
  return Row(
    children: [
      const Expanded(child: Text('')),
      Container(
          // width: 70,
          padding: const EdgeInsets.symmetric(horizontal: 3, vertical: 6),
          alignment: Alignment.bottomRight,
          decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                  color: Colors.black,
                  strokeAlign: BorderSide.strokeAlignCenter)),
          child: const Text(
            '再次购买',
            textAlign: TextAlign.center,
          ))
    ],
  );
}
